<?php
/**  
* JoinNormal.php
* 가입버튼을 누르면 서버에 등록되고 휴대폰으로 인증번호 전송한다.
* todo:
* 1.insert와 update를 함께 구현
*  - id가 본재하고, id와 pass가 일치 하는 경우 update처리, 그외는 insert 처리
* 2. 입력란 옆에 스크립트로 도움말 표현<span></span>으로 처리
* 2. 비밀번호 입력란 옆에 자바스크립트로 입력글자 한글자 보이기 처리 
*/

require_once(CLASS_PATH."/__autoload.php");


class JoinNormal extends Module
{
   public function __construct($page)
   {
      parent::__construct($page);
   }


   public function get_content()
   {

      return <<<EOD
	  
<section id='join'>

	<h2>회원가입</h2>
<fieldset>
	<legend> 무료회원 등록</legend>
    <form id='joinform' method='post' action="#" > 
	
    	<p><label for='id_' ><span>아이디</span></label><br />
			<input type='text' name='id_' id='id_' autofocus='autofocus' autocomplete='off' required placeholder='5글자이상 알파벳 숫자' pattern='[a-zA-Z0-9]{5,}' /><p />

		<p><label for='pass1_' ><span>비밀번호</span> </label><br />	
			<input type='password' name='pass1_' id='pass1_' title='5글자이상 알파벳 숫자로 입력' required pattern='[a-zA-Z0-9]{5,}' /><p />
			
		<p><input type='password' id='pass2_' required /><p />
	
		<p><label for='email_' ><span>이메일</span> </label><br />	
			<input type='email' name='email_' id='email_' placeholder='biz@printer79.com' required pattern='[A-Za-z0-9_.-]+@([A-Za-z0-9_]+\\.)+[A-Za-z]{2,4}' /><p />
			
		<p><label for='hp_' ><span>휴대폰</span> </label><br />	
			<input type='tel' name='hp_' id='hp_' placeholder='010-0000-0000' required pattern='\d{3}\-?\d{3,4}\-?\d{4}' /> </p>
			
		<p><button type='submit'> 인증번호 요청 </button><p />  
		
    </form>
</fieldset>


<!--     -->

<fieldset>
	<legend> 무료회원 인증</legend>	
	<form id='authform' method='post' action="#" > 

		<p><label for='auth_' ><span>인 증</span> </label><br />	
			<input type='text' name='auth_' id='auth_' placeholder='휴대폰 인증번호 입력' required pattern='[a-zA-Z0-9]{5,}' /><p />
			
		<p><input type='checkbox' id='agreement' required />
			<label for='agreement' >무료회원 이용약관 동의</label><p /> 
			
		<p><input type='checkbox' id='receivead' required />
			<label for='receivead' >휴대폰 및 E-mail을 통한 정보수신 동의</label><p /> 
			
		<p><button type='submit'> 가 입 </button><p />  
		
	</form>	
</fieldset>		
	

<section id='notice'>    
	<h2>알림</h2>
	<p>
	프린터친구는 익명으로 수집된 최소의 정보를 바탕으로 개별 회원에게 최적화 된 서비스를 제공합니다.<br /><br />
	회원은 검색과 관련없는 자료에 의해 방해받지 않는 환경에서 다양하고 유익한 정보를 제공 받을 수 있습니다.<br /><br />
	본 웹사이트는 웹표준에 따른 최신 기술로 제작되었지만, 웹브라우저에 따라 일부 기능이 구현되지 않을 수 있습니다.<br /><br />
	</p>
	
	<a href='#' > 무료회원 이용약관 </a>
	<a href='#'  title='권장 웹브라우저' > Chrome </a>
</section>



</section> <!-- join -->

EOD;
   }
   

   public function get_js()
   {    // 이 페이지에서만 사용
	   return <<<EOD
	   
		
		
EOD;
   }
   
   
   public function get_css()
   {    // 이 페이지에서만 사용
	   return <<<EOD

#join {
	margin: 20px 0;
	margin-left: 30px;;	
	}	
#join>h2 {
	margin-bottom: 30px;

	font-weight: bold;
	font-size: 20px;
	}
	
fieldset {
	border: 1px solid gray;	
	width: 40%;
	margin-left: 30px;
	margin-bottom: 20px;
	}
fieldset p {
	margin-left: 15px;
	margin-bottom: 10px;	
	}
legend {
	padding: 0 5px;
	font-size: 16px;
	}
input {
	margin-left: 20px;	
	}	 
label span {
	font-weight: bold;
	}
	  
#joinform {
	margin-top: 10px;
	}
#joinform button {
	margin-left: 50px;
	}

#authform{
	padding-top: 10px;
	}
#pass2_ {
	margin-top: -2px;	
	}
#authform button[type=submit] {
	margin-left: 40%;
	}

#notice {
	position: absolute;
	top: 170px;
	margin-left: 400px;
	width: 300px;		
	}
#notice h2 {
	font-weight: bold;
	font-size: 15px;
	padding-bottom: 20px;
	}
#notice p {
	line-height: 1.4em	
}
#notice a {
	display: block;
	margin-top: 40px;
	padding-left: 14px;
	font-weight: bold;
}

		
EOD;
   }
   
   
}
?>
